<!-- components/Breadcrumbs/Breadcrumbs.vue -->
<template>
  <nav
      role="navigation"
      aria-label="Breadcrumb"
      :class="['breadcrumbs', containerClass]"
  >
    <ol class="breadcrumbs__list">
      <li
          v-for="(item, index) in items"
          :key="index"
          class="breadcrumbs__item"
          :class="[
          itemClass,
          { [activeClass]: isLast(index) }
        ]"
      >
        <!-- 项内容 -->
        <slot
            name="item"
            :item="item"
            :isActive="isLast(index)"
        >
          <component
              :is="linkComponent(item)"
              v-if="!isLast(index)"
              :to="item.to"
              class="breadcrumbs__link"
              @click="handleClick(item, $event)"
          >
            <component
                :is="item.icon"
                v-if="item.icon"
                class="breadcrumbs__icon"
            />
            <span class="breadcrumbs__text">{{ item.text }}</span>
          </component>
          <span
              v-else
              class="breadcrumbs__current"
              aria-current="page"
          >
            <component
                :is="item.icon"
                v-if="item.icon"
                class="breadcrumbs__icon"
            />
            {{ item.text }}
          </span>
        </slot>

        <!-- 分隔符 -->
        <span
            v-if="!isLast(index)"
            class="breadcrumbs__separator"
            :class="separatorClass"
        >
          <slot name="separator">
            {{ separator }}
          </slot>
        </span>
      </li>
    </ol>
  </nav>
</template>

<script setup>
import { computed } from 'vue';
import { RouterLink } from 'vue-router';

const props = defineProps({
  items: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(item => 'text' in item);
    }
  },
  separator: {
    type: [String, Object],
    default: '/'
  },
  disableRouter: {
    type: Boolean,
    default: false
  },
  activeClass: {
    type: String,
    default: 'active'
  },
  containerClass: {
    type: String,
    default: ''
  },
  itemClass: {
    type: String,
    default: ''
  },
  separatorClass: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['item-click']);

const isLast = (index) => index === props.items.length - 1;

const linkComponent = (item) => {
  if (props.disableRouter) {
    return item.to ? 'a' : 'span';
  }
  return item.to ? RouterLink : 'span';
};

const handleClick = (item, event) => {
  emit('item-click', item, event);
  if (props.disableRouter && item.to) {
    event.preventDefault();
  }
};
</script>

<style>
.breadcrumbs {
  --text-color: #666;
  --link-color: #2c3e50;
  --active-color: #999;
  --separator-margin: 0 8px;
  --item-spacing: 0.5rem;
}

.breadcrumbs__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--text-color);
}

.breadcrumbs__link {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs__link:hover {
  color: var(--active-color);
}

.breadcrumbs__current {
  color: var(--active-color);
}

.breadcrumbs__separator {
  margin: var(--separator-margin);
  color: var(--text-color);
}

.breadcrumbs__icon {
  margin-right: 4px;
}
</style>